<template>
	<view class="page">
		<!-- 图片 -->
		<view class="top-img f-c-c">
			<image src="../../static/register/img_tp.png" mode="widthFix"></image>
		</view>

		<view class="">
			<!-- 表单 -->
			<view class="register-form">
				<u-form :model="registerForm" ref="registerRef">
					<u-form-item :left-icon-style="iconStyle" left-icon="phone" prop="mobile">
						<u-input v-model="registerForm.mobile" placeholder="请输入手机号" placeholder-style="color:#373737" />
					</u-form-item>

					<u-form-item :left-icon-style="iconStyle" left-icon="lock" prop="password">
						<u-input :password-icon="false" :clearable="false" :type="inputType"
							v-model="registerForm.password" placeholder="请输入密码" placeholder-style="color:#373737" />
						<u-icon @click="eyeClick" :name="eyeUrl"></u-icon>
					</u-form-item>
				</u-form>
			</view>

			<!-- 注册+忘记密码 -->
			<view class="register f-c-b themeColor">
				<view @click="$to('../login/login')" class="toLogin">注册</view>
				<view @click="$to('../forgetPass/forgetPass')" class="forgetPass">忘记密码</view>
			</view>

			<!-- 用户协议 -->
			<view class="agreement themeColor f-c">
				<image @click="tochangeIconUrl" :src="chooseIconUrl" mode="widthFix"></image>
				<text>我已阅读并同意<text @click="$to('../agreement2/agreement2')">《隐私政策》</text>和<text
						@click="$to('../agreement1/agreement1')">《用户协议》</text></text>
			</view>

			<!-- 登录 -->
			<view class="registerBtn">
				<button @click="toIndex" class="themeBac cwhite f36">登录</button>
			</view>

			<!-- 其他登录方式--微信 -->
			<view class="weixin">
				<u-divider border-color="#707070">其他登录方式</u-divider>
				<!-- $to('../weixinreg/weixinreg') -->
				<view @click="$u.toast('该功能尚未开通！')" class="f-c-c">
					<image src="../../static/register/icon_wx.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				registerForm: {
					mobile: "",
					password: ""
				},
				rules: {
					mobile: [{
							required: true,
							message: '请输入手机号',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change', 'blur'],
						}
					],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					}]
				},
				iconStyle: {
					fontSize: "40rpx"
				},
				eyeUrl: 'eye-off',
				inputType: 'password',
				chooseIconUrl: '../../static/register/icon_xz.png',
				chooseFlage: true,
			}
		},
		onReady() {
			this.$refs.registerRef.setRules(this.rules);
		},
		onLoad() {
			console.log(this.vuex_user.id==undefined);
			if(this.vuex_user.id!=undefined){
				this.registerForm.mobile===''
				this.registerForm.password===''
				this.$tar('../index/index')
			}
			// console.log(this.vuex_user);
		},
		methods: {
			eyeClick() {
				if (this.eyeUrl === "eye") {
					this.eyeUrl = "eye-off",
						this.inputType = "password"
				} else {
					this.eyeUrl = "eye",
						this.inputType = "text"
				}
			},
			tochangeIconUrl() {
				if (this.chooseIconUrl === "../../static/register/icon_wxz.png") {
					this.chooseIconUrl = "../../static/register/icon_xz.png"
					this.chooseFlage = !this.chooseFlage
				} else {
					this.chooseIconUrl = "../../static/register/icon_wxz.png"
					this.chooseFlage = !this.chooseFlage
				}
			},
			toIndex() {
				this.$refs.registerRef.validate(valid => {
					if (valid) {
						this.loginPhone()
						return;
					} 
				});
			},
			/* 用户登录 */
			async loginPhone(){
				if(!this.chooseFlage){
					this.$u.toast('请先勾选《用户协议》和《隐私政策》！')
					return;
				}
				console.log(this.registerForm);
				const res=await this.$u.api.loginPhone({
					phone:this.registerForm.mobile,
					pwd:this.registerForm.password
				})
				this.$u.vuex('vuex_user',res.data)
				console.log(this.vuex_user);
				res.success?this.$tar("../index/index"):this.$u.toast(res.msg)

			},
			async toBindWx(){
				const res= await this.$u.api.isBindingWX({wechatNum:555999})
				console.log(res);
			}
		}
	}
</script>

<style>
	.page {
		padding: 20rpx 80rpx;
	}

	.top-img {
		width: 100%;
		height: 590rpx;
		margin: 100rpx 0;
	}

	/* 表单 */
	.u-form-item {
		border-bottom: 4rpx solid #707070;
		padding: 0;
		margin-bottom: 20rpx;
	}

	.register {
		font-size: 30rpx;
		margin: 20rpx 0;
	}

	/* 协议 */
	.agreement {
		font-size: 27rpx;
	}

	.agreement image {
		width: 20rpx;
		height: 20rpx;
		margin-right: 20rpx;
	}

	/* 登录 */
	.registerBtn {
		margin: 50rpx 0;
	}

	/* 微信 */
	.weixin image {
		width: 51rpx;
		margin-top: 20rpx;
	}
</style>
